<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>选择章节</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>
<div id="app">
  <!-- 顶部导航栏 -->
  <el-menu class="el-menu-demo" mode="horizontal">
    <el-menu-item @click="navigateHome">首页</el-menu-item>
    <el-menu-item index="test" disabled>单词测试</el-menu-item>
  </el-menu>

  <!-- 选择章节内容 -->
  <div class="content" style="padding: 20px;">
    <el-form @submit.native.prevent="startTest">
      <el-form-item label="选择章节">
        <el-cascader
                v-model="selectedChapter"
                :options="chapterOptions"
                placeholder="请选择章节">
        </el-cascader>
        <el-button type="primary" @click="navigateToTest">开始测试</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>

<!-- 引入 Vue 和 ElementUI -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      chapterOptions: [
        {
          value: '3',
          label: '第3章',
          children: [
            { value: '3.2', label: '3.2' },
            { value: '3.3.1', label: '3.3.1' },
            { value: '3.3.2', label: '3.3.2' },
            { value: '3.3.3', label: '3.3.3' },
            { value: '3.3.4', label: '3.3.4' },
            { value: '3.3.5', label: '3.3.5' },
            { value: '3.3.6', label: '3.3.6' },
            { value: '3.3.7', label: '3.3.7' },
            { value: '3.3.8', label: '3.3.8' },
            { value: '3.3.9', label: '3.3.9' }
          ]
        },
        {
          value: '4',
          label: '第4章',
          children: [
            { value: '4.2', label: '4.2' },
            { value: '4.3.1', label: '4.3.1' },
            { value: '4.3.2', label: '4.3.2' },
            { value: '4.3.3', label: '4.3.3' },
            { value: '4.4', label: '4.4' }
          ]
        },
        {
          value: '5',
          label: '第5章',
          children: [
            { value: '5.2', label: '5.2' },
            { value: '5.3.1', label: '5.3.1' },
            { value: '5.3.2', label: '5.3.2' },
            { value: '5.3.3', label: '5.3.3' },
            { value: '5.3.4', label: '5.3.4' },
            { value: '5.3.5', label: '5.3.5' },
            { value: '5.3.6', label: '5.3.6' },
            { value: '5.3.7', label: '5.3.7' },
            { value: '5.3.8', label: '5.3.8' },
            { value: '5.3.9', label: '5.3.9' },
            { value: '5.3.10', label: '5.3.10' },
            { value: '5.3.11', label: '5.3.11' },
            { value: '5.3.12', label: '5.3.12' }
          ]
        },
        {
          value: '8',
          label: '第8章',
          children: [
            { value: '8.2', label: '8.2' },
            { value: '8.3.1', label: '8.3.1' },
            { value: '8.3.2', label: '8.3.2' },
            { value: '8.3.3', label: '8.3.3' },
            { value: '8.3.4', label: '8.3.4' },
            { value: '8.3.5', label: '8.3.5' },
            { value: '8.4.1', label: '8.4.1' },
            { value: '8.4.2', label: '8.4.2' },
            { value: '8.4.3', label: '8.4.3' },
            { value: '8.5', label: '8.5' },
            { value: '8.6.1', label: '8.6.1' },
            { value: '8.6.2', label: '8.6.2' },
            { value: '8.6.3', label: '8.6.3' },
            { value: '8.7.1', label: '8.7.1' },
            { value: '8.7.2', label: '8.7.2' },
            { value: '8.7.3', label: '8.7.3' },
            { value: '8.8', label: '8.8' }
          ]
        },
        {
          value: '11',
          label: '第11章',
          children: [
            { value: '11.1', label: '11.1' },
            { value: '11.2', label: '11.2' },
            { value: '11.3', label: '11.3' },
            { value: '11.4', label: '11.4' }
          ]
        }
      ],
      selectedChapter: [] // 修改为数组
    },
    methods: {
      navigateHome() {
        window.location.href = 'wangluwords.html';
      },
      navigateToTest() {
        if (!this.selectedChapter || this.selectedChapter.length < 2) {
          this.$message.error('请选择完整的章节！');
          return;
        }

        // 获取子章节部分，例如 `4.3.1` 而不是 `4.4.3.1`
        const subChapter = this.selectedChapter.slice(1).join('.');

        window.location.href = `test.html?chapter=${encodeURIComponent(subChapter)}`;
      }
      // navigateToTest() {
      //   if (!this.selectedChapter.length) {
      //     this.$message.error('请选择章节！');
      //     return;
      //   }
      //   const chapter = this.selectedChapter.join('.'); // 将数组转为字符串格式
      //   window.location.href = `test.html?chapter=${encodeURIComponent(chapter)}`;
      // }
    }
  });
</script>
</body>
</html>